<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>服务号-自定义菜单</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=883e3e04a">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">

    <style type="text/css">
        td div {
            float: left;
            text-align: center;
            height: 100%;
        }
        .table-detail {
            width: 560px;
            margin: 0 auto;
        }
        .lookStyle td{
            text-align: left;padding: 0 6px !important;
        }
        .lookStyle td.entryTitle,.lookStyle td.td-title{
            text-align: center;
        }
        .lookStyle td div{
            text-align: left;
        }
        .lookStyle .fj{
            cursor: not-allowed;
        }
        .entryTitle {
            font-weight: bold;
            width: 80px;
        }
    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<ul class="ztree" id="ulZTree"
    style="z-index:999;display:none;position:absolute;background-color:white;border:1px solid #72C3D9;height:200px;margin-top:0px;margin-left:0px;padding-left:0px;padding-top:5px;padding-bottom:5px;padding-right:0px;margin-right:0px;margin-bottom:0px;overflow: auto;"></ul>
<section class="content" id="app">
    <template v-for="(item, i) in button">
        <div style="height: 20px"></div>
        <table class="table-detail">
            <tr >
                <td class="entryTitle" style="color: #000000; font-size: 14px">一级菜单</td>
                <td colspan="2" style="width: inherit">
                    <input v-model="item.name" style="width: 100%; padding-left: 15px; height: 30px;border: 0px;" placeholder="请输入一级菜单名称" />
                </td>
                <td >
                    <input  type="button" value="添加二级菜单" @click="addSecond(i)" class="btn oaBtn btn-xs"
                            style="width:90px;"/>
                </td>
            </tr>
            <tr v-for="(item,index) in item.sub_button">
                <td class="entryTitle" style="color: #333333; font-size: 10px">二级菜单</td>
                <td >
                    <input v-model="item.name" style="width: 100%; padding-left: 15px; height: 30px; border: 0px" placeholder="请输入二级菜单名称" />
                </td>
                <td >
                    <input v-model="item.url" style="width: 100%; padding-left: 15px; height: 30px; border: 0px" placeholder="请输入二级菜单url" />
                </td>
                <td >
                    <input type="button" value="移除" @click="removeSecond(i,index)" class="btn oaBtn btn-xs"
                           style="width:60px;"/>
                </td>
            </tr>
        </table>
    </template>
    <div style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;">
        <input type="button" value="新增一级菜单" @click="addFirst()" class="btn oaBtn btn-sm" style="margin-top:5px;">
    </div>
    <div style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;margin-bottom: 15px">
        <input type="button" value="保存" @click="save()" class="btn oaBtn btn-sm" style="margin-top:5px;">
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=0d09dfab"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>

<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: '#app',
        data: {
            button:[{
                name:"",
                sub_button: []
            }]
        },
        methods: {

            save: function () {
                var self = this

                var data = {"button":self.button};
                var button = self.button;
                for (var i in button){
                    if (button[i]["name"].length == 0){
                        alert("请完善输入信息…")
                        return;
                    }
                    var sub_button = button[i]["sub_button"];
                    for (var j in sub_button){
                        if (sub_button[j]["name"].length == 0 || sub_button[j]["name"].length == 0){
                            alert("请完善输入信息…")
                            return;
                        }
                    }
                }
                $.wyui.postMethod("/serviceAccountMenu/createMenu.json", data, function (r) {
                    console.log(r);
                    if(r["errcode"] == "0"){
                        alert("操作成功");
                        parent.app.refresh();
                        api.close();
                    }else {
                        alert("操作失败，请重试！");
                    }
                });

            },

            //新增一级菜单
            addFirst: function () {
                if (this.button.length >= 3){
                    alert("只能添加3个一级菜单！");
                    return;
                }
                this.button.push({name:'', sub_button:[]});
            },
            //删除一级菜单
            removeFirst: function (index) {
                this.button.sub_button.splice(index, 1);
            },
            //新增二级菜单
            addSecond: function (index) {
                if (this.button[index].sub_button.length >= 5){
                    alert("每个一级菜单只能添加5个二级菜单！");
                    return;
                }
                this.button[index].sub_button.push({url:'', name: '', type:'view'});
            },
            //删除二级菜单
            removeSecond: function (button_index, subButton_index) {
                this.button[button_index].sub_button.splice(subButton_index, 1);
            }
        }
    });
</script>
</body>
</html>